<template>
  <view class="orders-goods">
    <view class="list" v-for="(item, index) in goodsList" :key="index">
      <view>{{ item.name }}</view>
      <view @tap="showPopup(true, item)">查看更多<icon class="iconfont icon">&#xe641;</icon>
      </view>
    </view>
    <van-popup :show="viewMore" round position="bottom" custom-style="height: 90%;border-radius: 20rpx 20rpx 0 0">
      <view class="orders-goods__message">
        <view class="title">
          <view>{{ goodsItemsList.name }}</view>
          <icon @tap="showPopup(false, {})" class="iconfont icon">&#xe650;</icon>
        </view>
        <view>
          <scroll-view scroll-y="true">
            <view class="popup-table">
              <view class="table-th">
                <view class="goods-size">
                  <text>规格</text>
                </view>
                <view><text>单价</text></view>
                <view><text>积分</text></view>
                <view><text>数量</text></view>
              </view>
              <view class="table-row" v-for="(item, index) in goodsItemsList.value" :key="index">
                <view><text>{{ item["颜色"] }}-{{ item["尺码"] }}</text></view>
                <view><text>{{ item.amount }}</text></view>
                <view><text>{{ item.integral | amountFormat }}</text></view>
                <view><text>{{ item.quantity }}</text></view>
              </view>
            </view>
          </scroll-view>
        </view>

      </view>
    </van-popup>
  </view>
</template>
<script>
  import {
    model
  } from "@/model";
  const {
    PageBo
  } = model.collection;
  export default {
    data() {
      return {
        viewMore: false,
        goodsItemName: "",
        purchanseList: [],
        goodsItemsList: {},
      };
    },
    onLoad(options) {
      uni.setNavigationBarTitle({
        title: options.type === "1" ? "新订单" : "预售订单",
      });
      this.updateDetails(options);
    },
    computed: {
      goodsList() {
        if (!this.purchanseList.length) {
          return [];
        }
        return this.purchanseList
          .find((item) => item.type == this.options.type)
          .purchanseGoodsItemsList.reduce((list, item) => {
            if (!item.goodsItems) {
              return list;
            }
            if (!list[item.goodsItems.goodsId]) {
              list[item.goodsItems.goodsId] = {
                value: [],
              };
            }
            let message = {
              quantity: item.quantity,
              amount: item.goodsItems.amountCost + item.goodsItems.amountCostAbove,
              integral: item.integralGiveDividend / item.integralGiveDivisor,
              ...JSON.parse(item.goodsItems.specJson || "[]").reduce(
                (obj, specification) => {
                  obj[specification.key] = specification.value;
                  return obj;
                }, {}
              ),
            };
            list[item.goodsItems.goodsId].value.push(message);
            list[item.goodsItems.goodsId].name = this.get(item, 'goodsItems.goods.name', '');
            return list;
          }, {});
      },
    },
    methods: {
      async updateDetails(options) {
        let res = await PageBo.sendApi("info", {
          params: {
            page: "pagePurchanseUpdate",
          },
          data: {
            pSn: options.pSn,
          },
        });
        if (res.code !== 2000) {
          return;
        }
        this.options = options;
        this.purchanseList = this.get(res, "data.purchanseList", []) || [];
      },
      showPopup(value, item) {
        this.viewMore = value;
        if (item.sort) {
          this.goodsItemsList = item;
          return
        }
        if (item.value) {
          const value = item.value,
            grouping = {};
          item.value = [];
          value.sort((a, b) => {
            const num1 = +a['尺码'].replace(/[^\d]+/g, ''),
            num2 = +b['尺码'].replace(/[^\d]+/g, '');
            if (num1 === num2){
              return a['尺码'].replace(/\d+/g, '') < b['尺码'].replace(/\d+/g, '' ) ? -1 : 1
            } else {
              return num1 < num2 ? -1 : 1
            }
          })
          for (let item of value) {
            if (!grouping[item['颜色']]) {
              grouping[item['颜色']] = [];
            }
            grouping[item['颜色']].push(item)
          }
          for (let arr of Object.values(grouping)) {
            item.value.push(...arr)
          }
          item.sort = true;
        }
        this.goodsItemsList = item;
      },
    },
  };
</script>
<style lang="less" scoped>
  .orders-goods {
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      font-size: 34rpx;
      color: #666;
      box-shadow: 0 1rpx 0 0 #e6e6e6;

      >view:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      >view:last-child {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        font-size: 26rpx;
        color: #999;

        .icon:last-child {
          margin-top: -18rpx;
          font-size: 30rpx;
        }
      }
    }

    .list:nth-child(3n-2) {
      margin: 0 30rpx;
    }

    .list:nth-child(3n-1),
    .list:nth-child(3n) {
      margin: 0;
      padding: 0 30rpx;
      box-sizing: border-box;
    }

    .orders-goods__message {
      display: flex;
      flex-direction: column;
      height: 100%;

      >view:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 0 30rpx;
        height: 100rpx;
        color: #333;
        box-sizing: border-box;
      }

      .title {
        font-size: 34rpx;
        font-weight: bold;
        border-bottom: 1rpx solid #f1f1f1;

        .icon {
          color: #999;
        }
      }

      >view:last-child {
        flex: 1;
        overflow: hidden;
        >scroll-view{
          height: 100%;
        }
      }

      .popup-table {
        display: table;
        padding: 0 30rpx 2rpx;
        width: 100%;
        box-sizing: border-box;

        >view {
          height: 90rpx;
          font-size: 30rpx;
          color: #666;
        }

        .table-th {
          color: #333;
        }

        .table-row,
        .table-th {
          display: table-row;
          box-shadow: 0 1rpx 0 0 #e6e6e6;

          >view {
            display: table-cell;
            line-height: 90rpx;
            text-align: center;
          }

          >view:first-child {
            text-align: left;
          }
        }
      }
    }
  }
</style>